<template>
  <div id="orderstat_container">
    <div class="dotime">
      <span>时间范围</span>
      <el-date-picker
        v-model="valuetime"
        type="daterange"
        value-format="yyyy-MM-dd HH:mm:ss"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-button
        @click="clicksearch"
        :disabled="disable"
        class="searBtn"
        type="primary"
        size="mini"
        >查询</el-button
      >
    </div>

    <div id="myChart" class="orderstat_container_main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { ordertotal } from "@/apis/echarts";
import { getYYYYMMDD_HHMMSS, getYYYYMMDD } from "@/utils/utils";

export default {
  data() {
    return {
      valuetime: [],
      disable: false,
    };
  },

  methods: {
    clicksearch() {
      console.log(this.valuetime);
      this.disable = true;
      setTimeout(() => {
        this.disable = false;
      }, 1000);
      ordertotal({ date: JSON.stringify(this.valuetime) }).then((res) => {
        console.log(res);
        let xData = res.data.data.map((obj) => getYYYYMMDD(obj.orderTime));
        let yData = res.data.data.map((obj) => obj.orderAmount);
        // console.log(xData);
        this.my.setOption({
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          toolbox: {
            feature: {
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ["line", "bar"] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          legend: {
            data: ["订单价格", "订单销量"],
          },
          xAxis: [
            {
              type: "category",
              data: xData,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "金额",
              min: 0,
              max: 480,
              interval: 80,
              axisLabel: {
                formatter: "￥{value}",
              },
            },
            {
              type: "value",
              name: "金额",
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: "￥{value}",
              },
            },
          ],
          series: [
            {
              name: "订单价格",
              type: "bar",
              data: yData,
            },
            {
              name: "订单销量",
              type: "line",
              yAxisIndex: 1,
              data: yData,
            },
          ],
        });
      });
    },
  },

  mounted() {
    this.my = echarts.init(document.getElementById("myChart"));
  },

  created() {
    let timenum = new Date().getTime() - 1000 * 60 * 60 * 24 * 365 * 2;

    this.valuetime = [
      getYYYYMMDD_HHMMSS(new Date(timenum)),
      getYYYYMMDD_HHMMSS(new Date()),
    ];
  },
};
</script>

<style lang="less" scoped>
#orderstat_container {
  height: 100%;
  background-color: #f0f2f5;

  display: flex;
  flex-direction: column;
  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .dotime {
    margin: 10px 0;
    span {
      margin-right: 10px;
    }
    .searBtn {
      margin-left: 10px;
    }
  }
  .orderstat_container_main {
    height: 500px;
    background-color: #fff !important;
  }
}
</style>